<template>
  <div ww3 auto>
    <div class="feed-btn" flex>
      <el-button type="primary" v-if="!userInfo.zfb" @click="showModal">
        绑定支付宝
      </el-button>
      <div v-else style="font-size: 15px">
        收款支付宝：{{userInfo.zfb}}<el-link style="margin-left: 10px; vertical-align: baseline" type="primary" @click="showModal">换绑</el-link>
        <el-button type="primary" @click="tx">
          确定
        </el-button>
      </div>
    </div>

    <el-card class="box-card">
      <div class="sale-table" auto="">
        <el-table
          :data="list"
          style="width: 100%"
          height="auto"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!--          <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>-->

          <el-table-column prop="create_time" label="提现时间">
          </el-table-column>

          <el-table-column prop="total" label="金额"></el-table-column>

          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              {{scope.row.status == '1' ? '待审核' : scope.row.status == '2' ? '审核通过' : scope.row.status == '3' ? '审核未通过' : scope.row.status == '4' ? '待处理 ' : scope.row.status == '5' ? '已处理' : '-'}}
            </template>
          </el-table-column>

          <el-table-column prop="date2" label="操作">
            <el-button type="text" @click="gotoPage">详情</el-button>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>

    <el-dialog
      title="绑定账号"
      :visible.sync="dialogFormVisible"
      class="show"
      width="46%"
    >
      <div
        ww1
        flex
        clum
        flex-c
        style="height: 200px; justify-content: space-around"
      >
        <p fz-14 ww1>
          请提供与认证或实名验证主体一致的支付宝账号，并确认账号可用性，姓名或主体不匹配将无法提现
        </p>
        <el-input
          v-model="zfbValue"
          placeholder="请输入支付宝账号"
          style="width: 50%"
        ></el-input>

        <div>
          <el-button
            type="primary"
            :disabled="!zfbValue"
            @click="sure"
            style="padding: 12px 70px !important"
            >提交</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from "@/api/info/info"
import loginHttp from "@/api/login/login"

export default {
  name: "OrderInvoice",
  data() {
    return {
      list: [],
      userInfo: {},
      zfbValue: '',
      pageSize: 10,
      pageNum: 1,
      total: 0,
      dialogFormVisible: false,
      tableData: [
        {
          date: "100",
          name: "https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "3000",
          address: "45",
          zip: 203,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
          satus: 1,
        },
      ],
    };
  },
  mounted() {
    const t = sessionStorage.user
    if(t) {
      this.userInfo = JSON.parse(sessionStorage.user).sysUser
    }else{
      return this.$message.error('请登录')
    }
    this.withdrawPage();
  },
  methods: {
    tx() {
      this.$router.push('/account/cashApply/12')
    },
    showModal() {
      this.zfbValue = ''
      this.dialogFormVisible = true
    },
    sure() {
      if(!this.zfbValue) {
        return this.$message.error('请输入支付宝帐户')
      }
      loginHttp.updateUserInfo({
        userId: sessionStorage.getItem('userId'),
        zfb: this.zfbValue
      }).then(res => {
        if(res.code === 0) {
          this.$message.success('操作成功')
          this.dialogFormVisible = false
          this.userInfo.zfb = this.zfbValue
          sessionStorage.user = JSON.stringify({
            cmsAuthentication: JSON.parse(sessionStorage.user).cmsAuthentication,
            sysUser: this.userInfo
          })
        }
      })
    },
    gotoPage() {
      this.$router.push('/account/cashInfo?id=1')
    },
    change() {
      this.$router.push({
        name: "VatInvoice",
      });
    },
    currentChange(val) {
      this.pageNum = val;
      this.withdrawPage();
    },
    /***
     * 获取提现记录
     */
    withdrawPage() {
      let data = {
        userId: sessionStorage.getItem('userId')
      }
      let page = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }
      $http.withdrawPage(page, data).then(res => {
        console.log('获取提现记录',res);
        this.total = res.total;
        this.list = res.rows;
      })
    }
  },
};
</script>

<style scoped>
.sale-table {
  width: 76%;
}
.box-card {
  margin: 2% auto;
}
</style>
